<template>
	<view class="wo-page u-padding-20" v-if="pageInit">
		<view class="wo-page-body u-padding-20 u-margin-bottom-20">
			<view class="wo-title u-text-center">
				<text>疫苗信息</text>
			</view>
			<u-cell-group>
				<u-cell-item title="接种点名称" :value="productDetail.hospital.name"></u-cell-item>
				<u-cell-item title="预约名称" :value="productDetail.name"></u-cell-item>
				<u-cell-item title="库存数量" :value="productDetail.stock"></u-cell-item>
				<u-cell-item title="剩余数量" :value="productDetail.stock - productDetail.sales"></u-cell-item>
				<u-cell-item title="开始时间" v-if="productDetail.start_time"
					:value="$dayjs.unix(productDetail.start_time).format('YYYY/MM/DD HH:mm')"></u-cell-item>
				<u-cell-item title="结束时间" v-if="productDetail.finish_time"
					:value="$dayjs.unix(productDetail.finish_time).format('YYYY/MM/DD HH:mm')"></u-cell-item>
				<u-cell-item title="预约条件" v-if="productDetail.needle_status"
					:value="productDetail.needle_status == 1 ? '仅限第一针' : '仅限第二针'"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="wo-page-body u-padding-20">
			<view class="wo-title u-text-center">
				<text>登记信息</text>
			</view>
			<u-cell-group>
				<u-cell-item title="信息选择" :value="planDetail.name||'请选择登记信息'" @click="planSelect = true"></u-cell-item>
				<u-cell-item title="预约时段" v-if="productDetail.mode_type == 1" :value="modeNeedleTime||'请选择预约时段'" @click="modeNeedleTimeSelect = true"></u-cell-item>
			</u-cell-group>
			<view class="wo-panel-foot u-padding-top-20">
				<u-button type="success" shape="circle" @click="orderSubmitFunc">立即预约</u-button>
			</view>
		</view>
		<!--region 信息选择-->
		<u-popup mode="center" width="80%" :mask-close-able="false" border-radius="10" :closeable="true"
			v-model="planSelect">
			<view class="wo-panel-popup">
				<view class="wo-panel-head u-text-center">
					<text>登记信息选择</text>
				</view>
				<view class="wo-panel-body">
					<view class="wo-list u-padding-10" v-if="planList.total">
						<view class="wo-item u-padding-10" v-for="(data_v, data_k) in planList.items" :key="data_k">
							<view class="wo-data u-padding-20">
								<view class="wo-data-info">
									<view class="wo-data-name">
										<text>{{ data_v.name }}</text>
									</view>
									<view class="">
										<text>证件号：{{ data_v.id_number }}</text>
									</view>
								</view>
								<view class="wo-data-action">
									<u-button type="primary" size="mini" shape="circle"
										@click="planSelectFunc(data_v)">选择</u-button>
								</view>
							</view>
						</view>
						<u-loadmore :status="planListStatus" @loadmore="planListMoreFunc"></u-loadmore>
					</view>
					<u-empty v-else text="暂无数据" mode="list"></u-empty>
				</view>
			</view>
		</u-popup>
		<!--endregion-->
		<!--预约时段选择-->
		<u-select v-model="modeNeedleTimeSelect" mode="single-column" :list="modeNeedleTimeList" @confirm="modeNeedleTimeFunc"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxUserDetail: {},
				productDetail: {},
				orderForm: {
					product_id: 0,
					plan_id: 0,
					time_id: 0
				},
				planSelect: false,
				planDetail: {},
				// 列表
				planList: {},
				// 列表状态
				planListStatus: 'loadmore',
				// 预约时段
				modeNeedleTime: '',
				modeNeedleTimeSelect: false,
				modeNeedleTimeList: [{
					value: 0,
					label: '暂无可预约时段'
				}],
			};
		},
		methods: {
			// 页面初始化
			async initPageFunc(option) {
				let product_id = option.product_id || 0;
				if (!product_id) {
					return false;
				}
				// 获取用户信息
				if (this.vuex_wx_token) {
					let wxUserDetail = await this.$u.api.wxUserDetail();
					if (wxUserDetail) {
						this.wxUserDetail = wxUserDetail;
					}
				}
				// 获取疫苗详情
				let productDetail = await this.$u.api.productDetail({
					id: product_id
				});
				if (!productDetail) {
					return false;
				}
				this.productDetail = productDetail;
				this.modeNeedleTimeList = productDetail.uview_select;
				this.orderForm.product_id = productDetail.id;
				// 取得信息列表
				let planList = await this.planListFunc();
				if (planList) {
					this.planList = planList;
				}
				this.pageInit = true;
			},
			async planListFunc(params) {
				params = params || {};
				this.dataListStatus = 'loading';
				let planList = await this.$u.api.planPersonList(params);
				if (!planList) {
					return false;
				}
				this.planListStatus = 'loadmore';
				return planList;
			},
			async planListMoreFunc() {
				if (this.planList.items.length >= this.planList.total) {
					this.planListStatus = 'nomore';
					return false;
				}
				let result = await this.planListFunc({
					page: ++this.planList.page_current
				});
				if (result) {
					this.planList.items = this.planList.items.concat(result.items);
				}
			},
			planSelectFunc(plan) {
				this.planDetail = plan;
				this.orderForm.plan_id = plan.id;
				this.planSelect = false;
			},
			modeNeedleTimeFunc(event) {
				// console.log('选择结果：', event);
				this.modeNeedleTime = event[0].label;
				this.orderForm.time_id = event[0].value;
			},
			async orderSubmitFunc() {
				if (!this.orderForm.product_id) {
					this.$refs.uToast.show({
						title: '请选择疫苗进行预约',
						type: 'error',
						url: '/pages/product/index'
					});
					return false;
				}
				if (!this.orderForm.plan_id) {
					this.$refs.uToast.show({
						title: '请选择登记信息',
						type: 'error'
					});
					return false;
				}
				let result = await this.$u.api.productOrderCreate(this.orderForm);
				if (!result) {
					return false;
				}
				this.$refs.uToast.show({
					title: '提交成功',
					type: 'success',
					url: '/pages/product_order/index'
				});
			}
		}
	};
</script>

<style lang="scss">
	.wo-page-body {
		background-color: #fff;
		border-radius: uni-unit(10px);

		&::after {
			border-radius: uni-unit(10px);
		}
		.wo-title {
			height: uni-unit(35px);
			font-size: uni-unit(18px);
			line-height: uni-unit(35px);
		}
	}

	.wo-data {
		display: flex;
		background-color: $uni-bg-color-grey;
		border-radius: uni-unit(5px);

		.wo-data-info {
			flex: 1;
			line-height: uni-unit(20px);
			font-size: uni-unit(12px);
			color: $uni-text-color-grey;

			.wo-data-name {
				height: uni-unit(30px);
				line-height: uni-unit(30px);
				font-size: uni-unit(16px);
				color: $uni-text-color;
			}
		}

		.wo-data-action {
			display: flex;
			align-items: center;
		}
	}
</style>
